import React, { Component } from 'react';
import { connect } from 'react-redux';
import { CSSTransition } from 'react-transition-group';
import { Link } from 'react-router-dom';
import { actionCreators } from './store';
import { actionCreators as loginActionCreators } from '../../pages/login/store'
import {
  HeaderWrapper,
  Logo,
  Nav,
  NavItem,
  SearchWrapper,
  NavSearch,
  SearchInfo,
  SearchInfoTitle,
  SearchInfoSwitch,
  SearchInfoList,
  SearchInfoItem,
  Addition,
  Button
} from './style'

class Header extends Component {
  render() {
    const { focused, list, inputFocus, inputBlur, loginState, logout } = this.props;
    return (
      <HeaderWrapper>
        <Link to="/">
          <Logo />
        </Link>
        <Nav>
          <NavItem className="left active">首页</NavItem>
          <NavItem className="left">下载App</NavItem>
          {
            loginState ? 
              <NavItem className="right" onClick={logout}>退出</NavItem> : 
              <Link to="/login">
                <NavItem className="right">登陆</NavItem>
              </Link>
          }
          <NavItem className="right">
            <i className="iconfont">&#xe636;</i>
          </NavItem>
          <SearchWrapper>
            <CSSTransition
              in={focused}
              timeout={200}
              classNames="slide"
            >
              <NavSearch 
                className={focused ? 'focused' : ''} 
                onFocus={() => inputFocus(list)}
                onBlur={inputBlur}
              />
            </CSSTransition>
            <i className={focused ? 'focused iconfont zoom' : 'iconfont zoom'}>&#xe654;</i>
            {this.getListArea()}
          </SearchWrapper>
        </Nav>
        <Addition>
          <Link to="/write">
            <Button className="writting">
              <i className="iconfont">&#xe624;</i>
              写文章
            </Button>
          </Link>
          <Button className="reg">注册</Button>
        </Addition>
      </HeaderWrapper>
    )
  }

  getListArea() {
    const { focused, list, page, totalPage, mouseEnter, mouseLeave, mouseIn, changePage } = this.props;

    const pageList = []
    const newList = list.toJS()
    for (let i = (page - 1) * 10; i < page * 10; i++) {
      if (i < newList.length && newList.length) {
        pageList.push(
          <SearchInfoItem key={newList[i]}>{newList[i]}</SearchInfoItem>
        )
      }
    }
    if (focused || mouseIn) {
      return (
        <SearchInfo onMouseEnter={mouseEnter} onMouseLeave={mouseLeave}>
          <SearchInfoTitle>
            热门搜索
            <SearchInfoSwitch onClick={() => changePage(page, totalPage, this.spin)}>
              <i ref={(icon) => this.spin = icon} className="iconfont spin">&#xe851;</i>
              换一批
            </SearchInfoSwitch>
          </SearchInfoTitle>
          <SearchInfoList>
            {pageList}
          </SearchInfoList>
        </SearchInfo>
      )
    } else {
      return null
    }
  }
}

const mapStateToProps = (state) => {
  return {
    focused: state.getIn(['header', 'focused']),
    list: state.getIn(['header', 'list']),
    page: state.getIn(['header', 'page']),
    totalPage: state.getIn(['header', 'totalPage']),
    mouseIn: state.getIn(['header', 'mouseIn']),
    loginState: state.getIn(['login', 'loginState'])
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    inputFocus(list) {
      list.size === 0 && dispatch(actionCreators.getList())
      dispatch(actionCreators.searchFocus())
    },
    inputBlur() {
      dispatch(actionCreators.searchBlur())
    },
    mouseEnter() {
      dispatch(actionCreators.enterMouseIn())
    },
    mouseLeave() {
      dispatch(actionCreators.leaveMouseIn())
    },
    logout() {
      dispatch(loginActionCreators.logout())
    },
    changePage(page, totalPage, spin) {
      let angle = spin.style.transform.replace(/[^0-9]/ig, '');
      if (angle) {
        angle = parseInt(angle, 10)
      } else {
        angle = 0
      }
      spin.style.transform = `rotate(${angle + 360}deg)`
      if (page < totalPage) {
        page++
      } else {
        page = 1
      }
      dispatch(actionCreators.changePage(page))
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Header);